<!DOCTYPE html>
<html>
<head>
    <title>生成TabBar图标</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; }
        .icon-container { margin: 20px 0; }
        canvas { border: 1px solid #ccc; margin: 10px; }
        .download-btn { 
            background: #20b2aa; 
            color: white; 
            border: none; 
            padding: 10px 20px; 
            cursor: pointer; 
            margin: 5px;
        }
    </style>
</head>
<body>
    <h1>TabBar图标生成器</h1>
    
    <div class="icon-container">
        <h3>首页图标 (房屋)</h3>
        <canvas id="homeIcon" width="81" height="81"></canvas>
        <button class="download-btn" onclick="downloadIcon('homeIcon', 'tabbar_home_new.png')">下载首页图标</button>
    </div>

    <div class="icon-container">
        <h3>预约服务图标 (日历)</h3>
        <canvas id="calendarIcon" width="81" height="81"></canvas>
        <button class="download-btn" onclick="downloadIcon('calendarIcon', 'tabbar_activity_new.png')">下载日历图标</button>
    </div>

    <div class="icon-container">
        <h3>社区中心图标 (房屋群)</h3>
        <canvas id="communityIcon" width="81" height="81"></canvas>
        <button class="download-btn" onclick="downloadIcon('communityIcon', 'tabbar_neighbor_new.png')">下载社区图标</button>
    </div>

    <div class="icon-container">
        <h3>服务管理图标 (文档)</h3>
        <canvas id="documentIcon" width="81" height="81"></canvas>
        <button class="download-btn" onclick="downloadIcon('documentIcon', 'tabbar_resource_new.png')">下载文档图标</button>
    </div>

    <div class="icon-container">
        <h3>个人中心图标 (用户)</h3>
        <canvas id="userIcon" width="81" height="81"></canvas>
        <button class="download-btn" onclick="downloadIcon('userIcon', 'tabbar_safety_new.png')">下载用户图标</button>
    </div>

    <script>
        // 首页图标 - 房屋
        function drawHomeIcon() {
            const canvas = document.getElementById('homeIcon');
            const ctx = canvas.getContext('2d');
            
            ctx.clearRect(0, 0, 81, 81);
            
            // 房屋主体
            ctx.fillStyle = '#666666';
            ctx.beginPath();
            ctx.moveTo(40, 15);
            ctx.lineTo(60, 30);
            ctx.lineTo(60, 65);
            ctx.lineTo(20, 65);
            ctx.lineTo(20, 30);
            ctx.closePath();
            ctx.fill();
            
            // 屋顶
            ctx.fillStyle = '#444444';
            ctx.beginPath();
            ctx.moveTo(35, 15);
            ctx.lineTo(45, 15);
            ctx.lineTo(50, 25);
            ctx.lineTo(30, 25);
            ctx.closePath();
            ctx.fill();
            
            // 门
            ctx.fillStyle = '#333333';
            ctx.fillRect(35, 45, 10, 20);
            
            // 窗户
            ctx.fillStyle = '#333333';
            ctx.fillRect(25, 35, 8, 8);
            ctx.fillRect(48, 35, 8, 8);
        }

        // 日历图标
        function drawCalendarIcon() {
            const canvas = document.getElementById('calendarIcon');
            const ctx = canvas.getContext('2d');
            
            ctx.clearRect(0, 0, 81, 81);
            
            // 日历主体
            ctx.fillStyle = '#666666';
            ctx.fillRect(20, 25, 41, 36);
            
            // 日历顶部
            ctx.fillStyle = '#444444';
            ctx.fillRect(20, 25, 41, 12);
            
            // 日历环
            ctx.fillStyle = '#ffffff';
            ctx.fillRect(25, 30, 6, 6);
            ctx.fillRect(50, 30, 6, 6);
            
            // 日期线条
            ctx.fillStyle = '#666666';
            ctx.fillRect(25, 45, 31, 2);
            ctx.fillRect(25, 50, 31, 2);
            ctx.fillRect(25, 55, 20, 2);
        }

        // 社区中心图标 - 房屋群
        function drawCommunityIcon() {
            const canvas = document.getElementById('communityIcon');
            const ctx = canvas.getContext('2d');
            
            ctx.clearRect(0, 0, 81, 81);
            
            // 左侧房屋
            ctx.fillStyle = '#666666';
            ctx.beginPath();
            ctx.moveTo(25, 20);
            ctx.lineTo(35, 20);
            ctx.lineTo(35, 60);
            ctx.lineTo(15, 60);
            ctx.lineTo(15, 20);
            ctx.closePath();
            ctx.fill();
            
            // 右侧房屋
            ctx.beginPath();
            ctx.moveTo(45, 20);
            ctx.lineTo(55, 20);
            ctx.lineTo(55, 60);
            ctx.lineTo(35, 60);
            ctx.lineTo(35, 20);
            ctx.closePath();
            ctx.fill();
            
            // 屋顶
            ctx.fillStyle = '#444444';
            ctx.fillRect(20, 20, 10, 5);
            ctx.fillRect(40, 20, 10, 5);
            
            // 门
            ctx.fillStyle = '#333333';
            ctx.fillRect(20, 45, 6, 15);
            ctx.fillRect(45, 45, 6, 15);
        }

        // 文档图标
        function drawDocumentIcon() {
            const canvas = document.getElementById('documentIcon');
            const ctx = canvas.getContext('2d');
            
            ctx.clearRect(0, 0, 81, 81);
            
            // 文档主体
            ctx.fillStyle = '#666666';
            ctx.fillRect(25, 15, 31, 46);
            
            // 文档顶部
            ctx.fillStyle = '#444444';
            ctx.fillRect(25, 15, 31, 8);
            
            // 文档线条
            ctx.fillStyle = '#333333';
            ctx.fillRect(30, 30, 21, 2);
            ctx.fillRect(30, 35, 21, 2);
            ctx.fillRect(30, 40, 21, 2);
            ctx.fillRect(30, 45, 15, 2);
            
            // 文档图标
            ctx.fillStyle = '#ffffff';
            ctx.fillRect(35, 18, 4, 4);
        }

        // 用户图标
        function drawUserIcon() {
            const canvas = document.getElementById('userIcon');
            const ctx = canvas.getContext('2d');
            
            ctx.clearRect(0, 0, 81, 81);
            
            // 头部
            ctx.fillStyle = '#666666';
            ctx.beginPath();
            ctx.arc(40, 25, 12, 0, 2 * Math.PI);
            ctx.fill();
            
            // 身体
            ctx.beginPath();
            ctx.moveTo(25, 40);
            ctx.lineTo(55, 40);
            ctx.lineTo(50, 65);
            ctx.lineTo(30, 65);
            ctx.closePath();
            ctx.fill();
        }

        // 下载图标
        function downloadIcon(canvasId, filename) {
            const canvas = document.getElementById(canvasId);
            const link = document.createElement('a');
            link.download = filename;
            link.href = canvas.toDataURL();
            link.click();
        }

        // 初始化所有图标
        window.onload = function() {
            drawHomeIcon();
            drawCalendarIcon();
            drawCommunityIcon();
            drawDocumentIcon();
            drawUserIcon();
        };
    </script>
</body>
</html> 